<template>
    <div>
        <!--<h1>安装</h1>-->
        <!--<Anchor title="CDN 引入" h2></Anchor>-->
        <!--<p>通过 <a href="https://unpkg.com/iview/" target="_blank">unpkg.com/iview</a> 可以看到 iView 最新版本的资源，也可以切换版本选择需要的资源，在页面上引入 js 和 css 文件即可开始使用：</p>-->
        <!--&lt;!&ndash;<i-code lang="html" bg>{{ code }}</i-code>&ndash;&gt;-->
        <!--<Anchor title="示例" h3></Anchor>-->
        <!--<p>通过 CDN 可以快速使用 iView 写出一个示例，您可以复制下面代码或<a href="http://output.jsbin.com/libihed" target="_blank">在线预览</a>。</p>-->
        <!--&lt;!&ndash;<i-code lang="auto" bg>{{ code.install.demo }}</i-code>&ndash;&gt;-->
        <!--<Anchor title="NPM 安装" h2></Anchor>-->
        <!--<p>推荐使用 npm 来安装，享受生态圈和工具带来的便利，更好地和 webpack 配合使用，当然，我们也推荐使用 ES2015。</p>-->
        <!--&lt;!&ndash;<i-code lang="auto" bg>{{ code.install.install }}</i-code>&ndash;&gt;-->
        <!--<p>如果您使用了 NPM 安装，并使用 webpack 作为构建工具，请继续阅读<router-link to="/docs/guide/start">快速上手</router-link>章节。</p>-->
        <h1>FBSUI</h1>
        <Anchor title="简介" h2></Anchor>
        <p>这里是Vue.js + Vue-router + Vuex 的前端开发脚手架，并内置4套皮肤，分别为：<span :style="{color:skinArray[0].rgb}">蓝色</span>、<span :style="{color:skinArray[1].rgb}">绿色</span>、<span :style="{color:skinArray[2].rgb}">橙色</span>、<span :style="{color:skinArray[3].rgb}">紫色</span>。</p>
        <Anchor title="引入" h3></Anchor>
        <p>引入 src/theme/style.less 来实现不同颜色之间的换肤</p>
        <i-code bg lang="javascript">{{ code.base }}</i-code>
        <p>在App.vue 入口文件中，定义好默认皮肤以及皮肤配置参数</p>
        <i-code bg lang="javascript">{{ code.entry }}</i-code>
    </div>
</template>

<script>
	import Demo from './demo/demo.vue';
	import Anchor from './anchor.vue';
	import iCode from './code/code';
	import Code from './code/install';

	export default {
		name: 'templete',
		components: {
			Anchor,
			Demo,
			iCode,
		},
		mounted () {

        },
		methods: {

		},
		data () {
			return {
				code:Code,
				skinArray:[{
					name:'蓝色',
					class:'blue',
					rgb:'rgba(74,144,226,1)',
				},{
					name:'橙色',
					class:'orange',
					rgb:'rgba(245,166,35,1)',
				},{
					name:'绿色',
					class:'green',
					rgb:'rgba(126,211,33,1)',
				},{
					name:'紫色',
					class:'violet',
					rgb:'rgba(189,16,224,1)',
				}]
			}
		},
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h1, h2 {
        font-weight: normal;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
    span.copy, span.scale, span.open-fiddle{
        border-radius: 0 0 3px 3px;
        padding: 2px 5px;
        position: absolute;
        top: 5px;
        right: 0;
        color: #b2b2b2;
        cursor: pointer;
    }
    span.scale{
        right: 25px;
    }
    p {
        font-size: 14px;
        line-height: 1.5;
        padding: 10px 0 ;
    }
    span.open-fiddle{
        right: 50px;
    }
    .bg + span.copy{
        right: 5px;
    }
    span.copy:hover, span.scale:hover, span.open-fiddle:hover{
        color: #5c6b77;
    }

    .api table {
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 100%;
        margin-bottom: 24px
    }

    .api table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600
    }

    .api table td,.api table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left
    }

    .api table td ul li {
        font-size: 12px!important
    }
</style>
